<template>
  <div class="app-container">
    <el-row style="height: 800px">
      <el-col :span="5" class="app-container" style="border: 1px solid #DCDFE6;height: 100%;margin-right: 30px;border-radius: 25px">
        <el-button type="primary" style="margin-bottom: 20px;" @click="NewType = true">新增类别</el-button>
        <!--<div style="margin-bottom: 20px">全部</div>
        <div style="margin-bottom: 20px">教材</div>
        <div style="margin-bottom: 20px">优惠券</div>-->
        <el-menu>
          <el-menu-item index="1" v-for="(item,index) in PayDataType">
            <i class="el-icon-s-grid"></i>
            <span slot="title">{{item.cate_name}}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="18" style="border: 1px solid #DCDFE6;height:100%;border-radius: 25px" class="app-container">
        <el-form>
          <div style="float: left">
            <el-input style="width: 300px;margin-right: 20px"></el-input>
          </div>
          <div style="float: left;">
            <el-button type="primary" style="float: left">查询</el-button>
          </div>
          <el-col :span="24" style="margin-top: 20px;margin-bottom: 20px">
            <el-button type="primary" @click="AddData = true">新增</el-button>
          </el-col>
        </el-form>
        <el-dialog title="新增物品" :visible.sync="AddData" width="500px">
          {{addPayData}}
          <el-form :model="addPayData" ref="addPayData" :rules="rules" label-width="60px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="类别:" prop="cate_id">
                  <el-select v-model="addPayData.cate_id" value="">
                    <el-option label="区域一" value="区域一"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称:" prop="item_name">
                  <el-select v-model="addPayData.item_name" value="">
                    <el-option label="区域一" value="区域一"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="编码:" prop="card_num">
                  <el-input v-model="addPayData.card_num"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规格:" prop="specification">
                  <el-input v-model="addPayData.specification"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单位:" prop="units">
                  <el-input v-model="addPayData.units"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销售单价:" prop="price" label-width="90px">
                  <el-input v-model="addPayData.price"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="状态:" prop="status">
                  <el-radio-group v-model="addPayData.status" @change="radio">
                    <el-radio :label="1" value="1">启用</el-radio>
                    <el-radio :label="2" value="2">停用</el-radio>
                  </el-radio-group>
                  <el-checkbox v-model="addPayData.is_return" style="font-weight: bold;margin-left: 30px" true-label="1" false-label="0">是否允许退费</el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="适用课程:" label-width="90px" prop="lession_id">
                  <el-select value="" v-model="addPayData.lession_id">
                    <el-option label="区域一" value="区域一"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注:">
                  <el-input v-model="addPayData.desc"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-button type="primary" @click="addPayItem('addPayData')">确认添加</el-button>
        </el-dialog>
        <el-dialog title="新增物品类别" :visible.sync="NewType" width="500px">
          <div>
            <el-row>
              <el-col :span="2" style="text-align: right">
                提示:
              </el-col>
              <el-col :span="22" style="margin-bottom:10px">
                <div>1、支持批量添加类别，类别只能用换行隔开，每行表示一个类别</div>
                <div>2、添加的物品类别不能重复</div>
              </el-col>
              <el-col :span="24">
                <el-input type="textarea" size="medium" rows="10"></el-input>
                <el-checkbox v-model="checked" style="font-weight: bold;">是否允许退费</el-checkbox>
                <div style="margin-top:10px">
                  注：勾选特殊物品后，该类别及子类将成为特殊物品类；
                  特殊物品不会受库存、进出货影响。
                </div>
              </el-col>
              <el-col :span="24" style="text-align: right">
                <el-button>确定</el-button>
                <el-button>取消</el-button>
              </el-col>
            </el-row>
          </div>
        </el-dialog>
        <el-table :data="tableData2" border style="width: 100%">
          <el-table-column fixed prop="id" label="日期" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="name" label="price" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="danwei" label="省份" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column fixed="right" label="操作" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
              <el-button type="warning" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { queryPayItem,addPayItem,queryPayCate } from '@/api/studentRecruit.js'
  export default {
    name: 'index2',
    data() {
      return {
        NewType: false,
        checked: false,
        AddData: false,
        tableData2: [{
          id: 1,
          name: '哈哈',
          danwei: '前端'
        }],
        PayDataType:null,
        addPayData:{
          item_name:null,
          cate_id:null,
          card_num:null,
          textbook_id:null,
          lession_id:null,
          status:null,
          is_return:0,
          specification:null,
          units:null,
          price:null,
          desc:null
        },
        rules: {
          cate_id: [
            { required: true, message: '请选择类别', trigger: 'blur,change' }
          ],
          item_name: [
            { required: true, message: '请选择名称', trigger: 'blur,change' }
          ],
          card_num: [
            { required: true, message: '请输入编码', trigger: 'blur,change' }
          ],
          specification: [
            { required: true, message: '请输入规格', trigger: 'blur,change' }
          ],
          units: [
            { required: true, message: '请输入单位', trigger: 'blur,change' }
          ],
          price: [
            { required: true, message: '请输入销售单价', trigger: 'blur,change' }
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'blur,change' }
          ],
          lession_id: [
            { required: true, message: '请选择课程', trigger: 'blur,change' }
          ]
        },
      }
    },
    methods: {
      async queryPayCate(){
        let queryData = {

        }
        let resData = await queryPayCate(queryData)
        this.PayDataType = resData.data
        console.log('分页查询栏目',resData)
      },
      radio(event){
        console.log(event)
      },
      handleClick(tab, event) {
        console.log(tab, event)
      },
      async queryPayItem(){
        let queryData = {
          page:1,
          limit:10
        }
        let resData = await queryPayItem(queryData)
        console.log('分页查询其他收费项',resData)
      },
      addPayItem(addPayData){
        this.$refs[addPayData].validate((valid) => {
          if (valid) {
            addPayItem(this.addPayData).then(resData => {
              if (resData.code == 200){
                this.$message.success('添加成功！')
                console.log('添加成功返回信息：',resData)
              }else {
                this.$message.error('添加失败！')
              }
            })
          }else {
            console.log(valid);
            return false;
          }
        });
      }
    },
    created() {
      this.queryPayItem()
      this.queryPayCate()
    }
  }
</script>

<style scoped>
  .el-menu{
    border: none;
  }
</style>
